<template>
	<view>
		<view class="">
			<uni-section type="line" style="height: 90rpx;width: 800rpx;">
				<uni-search-bar placeholder="请输入您要搜索的项目名称"  class="uni-mt-10" radius="5"
					clearButton="auto" cancelButton="none" v-model="searchValue" @confirm="search">
					<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
				</uni-search-bar>
			</uni-section>

			<view class="img-list">
				<image src="../../static/project/top.png" v-show="flag" style="height: 38px;width: 750upx;margin: 0;"
					mode="aspectFit"></image>
				<view class="img-list" v-for="(item, index) in thumbnailList " :key="index">
					<image :src="item.url" @click="toDetail(item.realEstateProject)" mode="aspectFit"
						style="height:260px;width:390px;margin:0px;position:relative;top:-10px;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				flag:false,
				thumbnailList:[]
			}
		},
		methods: {
			search() {
				console.log('searchValue', this.searchValue)
				this.thumbnailList = [];
				uni.request({
					url: 'https://www.f-cloud.top/web/' + `api/thumbnail/getByName/${this.searchValue}`, //仅为示例，并非真实接口地址。
					success: (res) => {
						console.log("res.data", res.data);
						for (var i = 0; i < res.data.length; i++) {
							var obj = {}
							obj.url = this.baseUrl + "file/图片/" + res.data[i].thumbnailUrl;
							obj.realEstateProject = res.data[i].realestateId;
							this.thumbnailList.push(obj);
						}
						this.text = 'request success';
						this.flag = true
					}
				});
			},
			toDetail(id) {
				console.log(id);
				uni.navigateTo({
					url: "/pages/realEstateProduct/realEstateProduct" + "?id=" + id,
					success: (res) => {
						console.log('跳转成功.')
					}
				})
			},
		}
	}
</script>

<style>
	.img-list {
		display: flex;
		flex-direction: column;
	}
</style>
